---
title: React Datepicker - Flowbite
description: Use the datepicker component to select a date from a calendar view based on an input element by selecting the day, month, and year values using React and Tailwind CSS
---

The Datepicker component from Flowbite React is an advanced UI element that you can use to allow users to pick a date from a calendar view by selecting the day, month, and year values which then will be available in the input field and state of the component.

Follow the examples below to see how you can use the Datepicker component by importing it from the Flowbite React library, customize the colors and behaviour of the component by overriding the default theme variables and using the props from React.

Import the component from `flowbite-react` to use the datepicker element:

```jsx
import { Datepicker } from "flowbite-react";
```

## Default Datepicker

Use this example to show a simple datepicker component.

<Example name="datepicker.root" />

## Localization

Use the `language` prop to set the language of the datepicker component.

The `labelTodayButton` and `labelClearButton` can also be used to update the text of the buttons.

<Example name="datepicker.localization" />

## Filter dates

You can use the `filterDate` prop to filter out specific dates from the datepicker component. This is useful if you want to disable certain dates or only allow selection of weekdays, for example.

The `Views` enum can be used to determine the current view of the datepicker, such as `Days`, `Months`, `Years` or `Decades`.

<Example name="datepicker.filter" />

## Limit the date

By using the `minDate` and `maxDate` props you can limit the date range that the user can select.

<Example name="datepicker.range" />

## Week start

The `weekStart` prop can be used to set the first day of the week inside the datepicker component.

```json
{
  "0": "Sunday",
  "1": "Monday",
  "2": "Tuesday",
  "3": "Wednesday",
  "4": "Thursday",
  "5": "Friday",
  "6": "Saturday"
}
```

<Example name="datepicker.weekStart" />

## Autohide

By setting the `autoHide` prop you can either enable or disable automatically hiding the datepicker component when selecting a value.

<Example name="datepicker.autoHide" />

## Title

You can use the `title` prop to set a title for the datepicker component.

<Example name="datepicker.title" />

## Inline

Use the `inline` prop to show the datepicker component without having to click inside an input field.

<Example name="datepicker.inline" />

## Controlled Date/Datepicker.

Use `<Datepicker value={}` to create a controlled `<Datepicker />`. Pass `null` to clear the input.

<Example name="datepicker.value" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="datepicker" />

## References

- [Flowbite Datepicker](https://flowbite.com/docs/plugins/datepicker/)
